<template>
  <div :loading="dataListLoading">
    <!--小程序 切换-->
    <div class="panel-container">
      <el-form size="mini" ref="form" :model="form" label-width="80px">
        <el-form-item label="小程序：">
          <el-select v-model="form.mini" placeholder="请选择">
            <el-option v-for="item in miniOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <!-- 实时概况 -->
    <div class="panel-container panel-2">
      <div class="panel-title">
        实时概况
        <div class="desc">更新时间：{{ overview.update_time || '--' }}</div>
      </div>
      <div class="list">
        <div class="item">
          <div class="num-1">{{ overview.group_cnt }}</div>
          <div class="label">群聊总数</div>
          <div class="num-2">
            较昨日{{ overview.group_cnt_last_up }}
            <i v-if="overview.group_cnt_last_up > 0" class="el-icon-top"></i>
            <i v-else-if="overview.group_cnt_last_up < 0" class="el-icon-bottom"></i>
            <i v-else class="el-icon-none">-</i>
          </div>
        </div>
        <div class="item">
          <div class="num-1">{{ overview.people_cnt }}</div>
          <div class="label">群成员总数</div>
          <div class="num-2">
            较昨日{{ overview.people_cnt_last_up }}
            <i v-if="overview.people_cnt_last_up > 0" class="el-icon-top"></i>
            <i v-else-if="overview.people_cnt_last_up < 0" class="el-icon-bottom"></i>
            <i v-else class="el-icon-none">-</i>
          </div>
        </div>
        <div class="item">
          <div class="num-1">{{ overview.user_cnt }}</div>
          <div class="label">小程序用户总数</div>
          <div class="num-2">
            较昨日{{ overview.user_cnt_last_up }}
            <i v-if="overview.user_cnt_last_up > 0" class="el-icon-top"></i>
            <i v-else-if="overview.user_cnt_last_up < 0" class="el-icon-bottom"></i>
            <i v-else class="el-icon-none">-</i>
          </div>
        </div>
      </div>
    </div>
    <div class="panel-container">
      <div class="panel-title">群成员新增人数</div>
      <!--搜索-->
      <div class="panel-container">
        <searchuinew :searchFormArr="searchFormArr1" @searchParma="searchParma1" :isAccording="isAccording" ref="searchUi"></searchuinew>
      </div>
      <line-chart :chart-data="chartDataInc"></line-chart>
    </div>
    <div class="panel-container">
      <div class="panel-title">群成员总数排行</div>
      <!--搜索-->
      <div class="panel-container">
        <searchuinew :searchFormArr="searchFormArr2" @searchParma="searchParma2" :isAccording="isAccording"></searchuinew>
      </div>
      <bar-chart :chart-data="chartDataTotal"></bar-chart>
    </div>
  </div>
</template>

<script>
import BarChart from './BarChart'
import LineChart from './LineChart'

import { apiProjectCnt, apiMemberIncCnt, apiMemberTotalCnt, noticebase, cate_select, apiCateGroupList } from '@/api/wxapplet'
export default {
  components: { LineChart, BarChart },
  data() {
    return {
      form: { mini: '' },
      searchFormArr1: [
        {
          fieldName: '统计日期：',
          type: 'timePicker',
          field: 'time',
          placeholder: '请选择',
          timeType: 'daterange',
          format: 'yyyy-MM-dd',
        },
        {
          fieldName: '群聊类型：',
          type: 'select',
          field: 'cate_id',
          option: [],
          placeholder: '请选择',
        },
        {
          fieldName: '群聊名称：',
          type: 'select',
          field: 'group_ids',
          option: [],
          placeholder: '请选择',
          multiple: true,
        },
      ],
      searchFormArr2: [
        {
          fieldName: '群聊类型：',
          type: 'select',
          field: 'cate_id',
          option: [],
          placeholder: '请选择',
        },
      ],
      isAccording: true,
      searchParams1: {
        start_time: '',
        end_time: '',
        cate_id: '',
        group_ids: [],
      },
      searchParams2: {
        cate_id: '',
      },

      dataListLoading: false,
      miniOption: [],
      overview: {},
      chartDataInc: {},
      chartDataTotal: {},
      currentCateId: null,
    }
  },
  watch: {
    form: {
      handler: function () {
        this.getCateList()
        this.getDataList()
        this.getNumberTotal()
      },
      deep: true,
    },
  },
  mounted() {
    this.getMiniList()
  },
  methods: {
    // 获取小程序
    getMiniList() {
      noticebase().then((res) => {
        const { data } = res
        if (data.project.length <= 0) return
        this.miniOption = data.project.map((item) => {
          return {
            label: item.key,
            value: item.value,
          }
        })
        this.form.mini = this.miniOption[0].value
      })
    },
    // 获取群聊类型
    getCateList() {
      this.dataListLoading = true
      const info = { project_id: this.form.mini }
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      cate_select(formData)
        .then((res) => {
          this.dataListLoading = false
          const { data } = res
          if (!data.project || data.project.length === 0) {
            return
          }
          this.searchFormArr1.find((item) => {
            return item.field === 'cate_id'
          }).option = this.searchFormArr2.find((item) => {
            return item.field === 'cate_id'
          }).option = data.project.map((item) => {
            return {
              id: item.value,
              text: item.key,
            }
          })
          this.$refs.searchUi.clearFormItem('cate_id', data.project[0].value)
          this.$refs.searchUi.submitForm()
        })
        .catch((e) => {
          this.dataListLoading = false
        })
    },
    // 获取群聊名称
    getGroupList() {
      this.dataListLoading = true
      const info = { cate_id: this.currentCateId }
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      apiCateGroupList(formData)
        .then((res) => {
          this.dataListLoading = false
          const { data } = res
          this.searchFormArr1.find((item) => {
            return item.field === 'group_ids'
          }).option = data.group.map((item) => {
            return {
              id: item.value,
              text: item.key,
            }
          })
        })
        .catch((e) => {
          this.dataListLoading = false
        })
    },
    // 获取数据
    getDataList() {
      this.dataListLoading = true
      const info = { app_id: this.form.mini }
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      apiProjectCnt(formData)
        .then((res) => {
          this.dataListLoading = false
          const { data } = res
          this.overview = data
        })
        .catch((e) => {
          this.dataListLoading = false
        })
    },
    getNumberInc() {
      this.dataListLoading = true
      const info = Object.assign({ app_id: this.form.mini }, this.searchParams1)
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      apiMemberIncCnt(formData)
        .then((res) => {
          this.dataListLoading = false
          const { data } = res
          this.chartDataInc = data === '' ? { empty: true } : data
        })
        .catch((e) => {
          this.dataListLoading = false
        })
    },
    getNumberTotal() {
      this.dataListLoading = true
      const info = Object.assign({ app_id: this.form.mini }, this.searchParams2)
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      apiMemberTotalCnt(formData)
        .then((res) => {
          this.dataListLoading = false
          const { data } = res
          this.chartDataTotal = data
        })
        .catch((e) => {
          this.dataListLoading = false
        })
    },
    // 列表查询
    searchParma1(e) {
      this.searchFormArr1.forEach((item) => {
        if (e[item.field]) {
          this.searchParams1[item.field] = e[item.field]
        } else {
          this.searchParams1[item.field] = ''
        }
      })
      if (e.time && e.time[0]) {
        this.searchParams1.start_time = e.time[0]
        this.searchParams1.end_time = e.time[1]
      } else {
        this.searchParams1.start_time = ''
        this.searchParams1.end_time = ''
      }
      if (this.searchParams1.cate_id && this.searchParams1.cate_id !== this.currentCateId) {
        // 群聊类型变化，请求求聊名称
        this.currentCateId = this.searchParams1.cate_id
        this.searchParams1.group_ids = ''
        this.$refs.searchUi.clearFormItem('group_ids')
        this.getGroupList()
      }
      this.getNumberInc()
    },
    // 列表查询
    searchParma2(e) {
      this.searchFormArr2.forEach((item) => {
        if (e[item.field]) {
          this.searchParams2[item.field] = e[item.field]
        } else {
          this.searchParams2[item.field] = ''
        }
      })
      this.getNumberTotal()
    },
  },
}
</script>

<style scoped lang="scss">
.panel-2 {
  .panel-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .desc {
      margin-left: 10px;
      font-size: 14px;
      color: #909399;
      font-weight: normal;
    }
  }
  .list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    line-height: 2;
    .item {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      width: 20%;
      .num-1 {
        font-size: 26px;
        font-weight: bold;
        color: #409eff;
      }
      .label {
      }
      .num-2 {
        color: #909399;
      }
    }
  }
}
.el-icon-top {
  font-weight: bold;
  color: #67c23a;
}
.el-icon-bottom {
  font-weight: bold;
  color: #f56c6c;
}
.el-icon-none {
  font-weight: bold;
}
</style>
